<template>
  <div>
    <el-button @click="editMod">编辑模式</el-button>
    <el-button @click="beginEdit">开始修改</el-button>
    <el-button @click="endEdit">结束修改</el-button>
    <el-button @click="saveEdit">保存到服务器</el-button>
    <ct-map map-id="pg"
            style="height: 800px"
            crs="4326"
            :ct-zoom="17"
            :ct-center="[118.1757487, 24.5276417]"
            @mapInitCompleted="getMapInfo">
      <template v-slot:customControl>
        <div class="table-parent">
          <el-table
              :data="tableData"
              style="width: 100%"
              :height="500">
            <el-table-column
                prop="gid"
                label="gid"
                width="60">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                width="60">
            </el-table-column>
            <el-table-column
                prop="geom"
                label="路线"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                width="80"
                label="操作"
                align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">Edit
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </ct-map>
    <!-- Form -->
    <el-dialog title="道路信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="道路名称" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="坐标" :label-width="formLabelWidth" style="height: 400px;overflow-y: auto">
          <div v-for="(item,index ) in form.coordinates" :key="index">
            <div style="display: flex">
              <div style="width: 80px;margin-right: 20px">{{ index }}</div>
             lng: <el-input style="width:100px " v-model="form.coordinates[index].x"></el-input>
             lat: <el-input style="width:100px " v-model="form.coordinates[index].y"></el-input>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DashboardMap",
  data() {
    return {
      dialogFormVisible: false,
      form: {
        gid: null,
        name: '',
        coordinates: [],
      },
      formLabelWidth: '80px',
      tableData: null,
      input: '',
      mapInfo: {
        Map: null,
        CityJSON: null,
        Layer: null,
        CtMapUtils: {
          measureUtil: null,
          markerUtil: null,
          clusterUtil: null,
          drawUtil: null,
          controllerUtil: null,
          translateXYTool: null,
          switchLayerUtil: null,
          label: null,
          ui: null,
          DomUtil: null,
          maptalks: null,
          layerSwitch: {
            showGDBaseLayer: null,
            showBDBaseLayer: null,
            showBDSatelliteLayer: null,
            showBDTrafficLayer: null,
            showGDSatelliteLayer: null,
            showGDTrafficLayer: null,
          }
        },
        systemLayerArray: null,
        systemLayerMap: null
      },
      mapTalks: null,
      fujian_edit_layer: null,
      lineSelected: null,
      gidToLidMap: new Map(),
    }
  },
  methods: {
    saveForm() {
      let arr = []
      this.form.coordinates.forEach((point) => {
        arr.push([parseFloat(point.x), parseFloat(point.y)])
      })
      let json = new this.mapInfo.CtMapUtils.maptalks.MultiLineString(arr).toGeoJSON()
      let zz = {gid: this.form.gid, xyData: json};
      this.axios.post('http://127.0.0.1:8888/java/update', JSON.stringify(zz), {headers: {'Content-Type': 'application/json'}}).then(function (response) {
        console.log(response)
        if (response.status === 200) {
          console.log(200)
        }
      }).catch(function (error) {
        console.log(error);
      });
      this.dialogFormVisible = false
    },
    handleEdit(index, row) {
      this.form = {
        gid: null,
        name: '',
        coordinates: [],
      }
      this.dialogFormVisible = true
      this.form.name = row.name
      this.form.gid = row.gid

      row.customGeomJson.coordinates[0].forEach(p => {
        let zz = {
          x: p[0], y: p[1]
        }

        this.form.coordinates.push(zz)
      })
    },
    initFujianLineData() {
      let _this = this
      this.axios.get('http://127.0.0.1:8888/java/getAllInfo').then((response) => {
        _this.fujian_edit_layer = new _this.mapTalks.VectorLayer('fujian_edit').addTo(_this.mapInfo.Map);
        let dataList = response.data;
        _this.tableData = dataList

        dataList.forEach(function (line) {
          let coordinateArray = line.customGeomJson.coordinates[0];
          let lineString = new _this.mapInfo.CtMapUtils.maptalks.LineString(coordinateArray)
          lineString.setId(line.gid.toString())
          _this.gidToLidMap.set(line.gid, lineString.getId())
          _this.fujian_edit_layer.addGeometry(lineString, false)
          //
          lineString.on('click dblclick editend', function (p) {
            if (p.type === 'click') {
              if (_this.lineSelected) {
                _this.lineSelected.updateSymbol({'lineColor': '#111111', 'lineWidth': 2})
              }
              lineString.updateSymbol({'lineColor': '#f1148a', 'lineWidth': 5})
              _this.lineSelected = lineString
            } else if (p.type === 'editend') {
              _this.lineSelected = lineString
            } else if (p.type === 'dblclick') {
              lineString.updateSymbol({'lineColor': '#111111', 'lineWidth': 2})
              _this.lineSelected = null
            }
          })
        })
      })
    },
    getMapInfo(mapInfo) {
      this.mapInfo = mapInfo
      this.mapTalks = this.mapInfo.CtMapUtils.maptalks
    },
    editMod() {

    },
    beginEdit() {
      this.lineSelected.startEdit()
    },
    endEdit() {
      this.lineSelected.endEdit()
    },
    saveEdit() {
      let gid = parseInt(this.lineSelected.getId());
      let json = new this.mapInfo.CtMapUtils.maptalks.MultiLineString(this.lineSelected.getCoordinates()).toGeoJSON()
      let zz = {gid: gid, xyData: json};
      this.axios.post('http://127.0.0.1:8888/java/update', JSON.stringify(zz), {headers: {'Content-Type': 'application/json'}}).then(function (response) {
        console.log(response)
        if (response.status === 200) {
          console.log(200)
        }
      }).catch(function (error) {
        console.log(error);
      });
      this.dialogFormVisible = false
    },
  },
  created() {
    this.initFujianLineData()
  },
  mounted() {
  }
}
</script>

<style scoped>
.table-parent {
  margin-top: 10px;
  margin-left: 10px;
}
</style>